<!-- 
	场景 scene  1 选择负责人   2 选择项目经理  3 选择项目成员  4 聊天成员（多选）  5 审批人  6 抄送人  7 报告撰写人  8 采购申请人  9 生产任务检查人员


-->

<template>
	<view :class="['page',{'iphoneX':isIphoneX}]">
		<view class="h45">
			<view class="fix-wrap">
				<view class="search-form">
					<view class="icon iconfont f-s44">&#xe622;</view>
					<input type="text" v-model="keyword" class="sc-inp" @confirm="search">
					<view v-if="keyword" class="clear-btn iconfont f-s44" @click="clearKeyword">&#xe724;</view>
				</view> 	
			</view>
		</view>
		<view v-if="isLogin" class="body">
			<c-loading v-if="loadingState.default" :loadingState="loadingState"></c-loading>

			<template v-else>
				
			<!-- 聊天成员 -->
				<template v-if="scene==4">
					<!-- 添加聊天成员 -->
					<template v-if="chat_type=='add'">
						<template v-if="list.length>0">
							<view class="mail-list"> 		 
								<view v-for="(item,index) in list" :key="index">
									<view class="group-name">{{item.department_name}}</view> 
									<view class="item" :class="{'disabled':subitem.isDisabled}" v-for="(subitem,subindex) in item.ulist" :key="subindex"
										@click="selectUser(index,subindex)">
										<view class="icon">{{subitem.username|substringUsername(subitem.username)}}</view>
										<view class="content">
											<view class="name">{{subitem.username}}</view>
											<view v-if="subitem.checked" class="iconfont f-blue f-s40">&#xe637;</view>
											<view v-else class="iconfont f-grey f-s40">&#xe614;</view>
									
										</view>
									</view>							
								</view>
							</view>
							<c-loading :loadingState="loadingState"></c-loading>
						</template>
						
						<c-empty v-else msg="暂无数据"></c-empty>
					</template>
					
					<!-- 删除聊天成员 -->
					<template v-if="chat_type=='cut'">
						<view class="mail-list">						
							<view class="item" v-for="(item,index) in chat_user" :key="index" @click="selectUser(index)">
								<view class="icon">{{item.username|substringUsername(item.username)}}</view>
								<view class="content">
									<view class="name">{{item.username}}</view>
									<view v-if="item.checked" class="iconfont f-blue f-s40">&#xe637;</view>
									<view v-else class="iconfont f-grey f-s40">&#xe614;</view>
							
								</view>
							</view>	 
						</view> 
					</template>
				</template>
				
				
				<template v-else>
					<template v-if="list.length>0">
						<view class="mail-list">							 
							<!-- 其他 -->
							<template>
								<view v-for="(item,index) in list" :key="index">									
									<view class="group-name">{{item.department_name}}</view> 
									<view v-if="subitem.dep_leader==1" class="item" :class="{'disabled':subitem.isDisabled}" v-for="(subitem,subindex) in item.ulist" :key="subindex"
										@click="selectUser(index,subindex)">											
											<view class="icon m-bg">{{subitem.username|substringUsername(subitem.username)}}</view>
											<view class="content">
												<view class="name">{{subitem.username}}</view>
												<view v-if="subitem.checked" class="iconfont f-blue f-s40">&#xe637;</view>
												<view v-else class="iconfont f-grey f-s40">&#xe614;</view>
											</view>											
									</view> 
									<view v-if="subitem.dep_leader==0" class="item" :class="{'disabled':subitem.isDisabled}" v-for="(subitem,subindex) in item.ulist" :key="subindex"
										@click="selectUser(index,subindex)">											
											<view class="icon">{{subitem.username|substringUsername(subitem.username)}}</view>
											<view class="content">
												<view class="name">{{subitem.username}}</view>
												<view v-if="subitem.checked" class="iconfont f-blue f-s40">&#xe637;</view>
												<view v-else class="iconfont f-grey f-s40">&#xe614;</view>
											</view>											
									</view> 
									 		
								</view>
							</template>
						</view>
						<c-loading :loadingState="loadingState"></c-loading>
					</template>
					
					<c-empty v-else msg="暂无数据"></c-empty>
				</template>
				
			</template>
		</view>

		<view class="footer m-t2">
			<view class="fix-wrap select-bar">
				<view class="select-wrap">
					<template v-if="type==1">
						<text class="label">已选择({{sp_user.id?1:0}})</text>
						<view class="select-list">
							<view v-if="sp_user.id" class="avator">
								{{sp_user.username|substringUsername(sp_user.username)}}</view>
						</view>
					</template>
					<template v-if="type==2">
						<text class="label">已选择({{cs_user.length}})</text>						
						<view class="select-list">
							<scroll-view scroll-x="true" scroll-with-animation="true" id="J-scroll-body" :scroll-left="scroll_left">
								<view class="scroll-view">
									<view class="avator" v-for="(item,index) in cs_user" :key="index">
										{{item.username|substringUsername(item.username)}}
									</view>
								</view>
							</scroll-view>
						</view>						
					</template>
				</view>
				<view v-if="sp_user.id||cs_user.length>0" class="btn submit-btn" @click="confirm">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isIphoneX: getApp().globalData.isIphoneX,
				isLogin: false,
				loadingState: {
					default: true,
					loading: false,
					completed: false
				},
				type: 1, // 1 单选 2 多选
				scene:'',    //   1 选择负责人  2 选择项目经理
				list: [],
				page: 1,
				keyword: '',
				sp_user: {},
				cs_user: [],
				select_data_sp: {},
				select_data_cs: [],
				total: 0,
				department_id:'',
				select_id:[],
				scroll_left:0,
				gid:'',    // 聊天室id
				chat_user:[],  // 聊天室成员
				chat_type:'',    // add 添加 cut 删除
				

			}
		},
		filters: {
			substringUsername(val) {
				if (val) return val.substring(val.length - 2);
			},
		},
		async onLoad(params) {  
			this.isLogin = await this.$loginState('check');
			this.type = params.type;
			this.scene=params.scene; 
			
			// 场景 scene  1 选择负责人   2 选择项目经理  3 选择项目成员  4 聊天成员（多选）  5 审批人  6 抄送人   7 报告撰写人
			switch(this.scene){				
				case "1":
					this.department_id=params.department_id;
					uni.setNavigationBarTitle({
						title:"选择负责人"
					})
				break;
				case "2":
					uni.setNavigationBarTitle({
						title:"选择项目经理"
					})
				break;
				case "3":
					this.department_id=params.department_id;
					uni.setNavigationBarTitle({
						title:"添加项目成员"
					})
				break;
				case "4":
					this.gid=params.gid;
					this.chat_type=params.chat_type; 
					uni.setNavigationBarTitle({
						title:this.chat_type=='add'?"添加聊天成员":"删除聊天成员"
					})
				break;
				case "5":		
					this.department_id=params.department_id;
					uni.setNavigationBarTitle({
						title:"选择审批人"
					})
				break;
				case "6":
					uni.setNavigationBarTitle({
						title:"选择抄送人"
					})
				break;
				case "7":
					this.department_id=params.department_id;
					uni.setNavigationBarTitle({
						title:"选择报告撰写人"
					})
				break;
				case "8": 
					uni.setNavigationBarTitle({
						title:"选择申请人"
					})
				break;
				case "9":
					this.department_id=params.department_id;
					uni.setNavigationBarTitle({
						title:"选择检查人员"
					})
				break;
			}
			
			
	 
			if (this.isLogin) {
				
				// 项目经理 、 审批人员 
				if(this.scene==2||this.scene==5){
					this.list=await this.getList();  
				} 
				
				// 选择项目负责人
				if(this.scene==1){
					this.list=await this.getList();
					let user_id = params.select_data.split(','); 
					 
					user_id.forEach(item => {
						this.list.forEach(uitem => { 
							if(uitem.ulist.length>0){
								uitem.ulist.forEach(usubitem => {
									if (usubitem.dep_leader==1&&usubitem.department_id==this.department_id) { 
										usubitem.isDisabled = true;
										// this.cs_user.push(usubitem);
									}
									if (item == usubitem.id&&usubitem.dep_leader!=1) {
										usubitem.checked = true; 
										this.cs_user.push(usubitem);
									}
								})
							}
							
						})
					})						 
				} 
				
				// 项目人员
				if(this.scene==3){
					this.list=await this.getList(); 
					let user_id = params.select_data.split(',');  
					user_id.forEach(item => {
						this.list.forEach(uitem => { 
							if(uitem.ulist.length>0){
								uitem.ulist.forEach(usubitem => {
									if (item == usubitem.id) { 
										usubitem.checked = true;
										usubitem.isDisabled = true;
										this.cs_user.push(usubitem);
									}
								})
							} 
						})
					})	
				} 
				
				// 聊天人员
				if(this.scene==4){ 						
					if (this.chat_type=='add') {
						this.list=await this.getList();
						this.cs_user = await this.getChatUser(); 						
						if(this.list.length>0){
							this.cs_user.forEach(item => {
								this.list.forEach(uitem => { 
									if(uitem.ulist.length>0){
										uitem.ulist.forEach(usubitem => {
											if (item.id == usubitem.id) { 
												usubitem.checked = true;
												usubitem.isDisabled = true;
											}
										})
									}
									
								})
							})
						}
						
					} 	
					if ( this.chat_type=='cut') {	
						this.chat_user = await this.getChatUser();   
					} 
				} 
				 
				
				// 抄送人员
				if(this.scene==6){
					this.list=await this.getList();
					let user_id = params.select_data.split(','); 
					user_id.forEach(item => {
						this.list.forEach(uitem => { 
							if(uitem.ulist.length>0){
								uitem.ulist.forEach(usubitem => {
									if (item == usubitem.id) { 
										usubitem.checked = true; 
										this.cs_user.push(usubitem);
									}
								})
							}
							
						})
					})						 
				} 
				
				// 选择报告撰写人
				if(this.scene==7){
					this.list=await this.getList();
					let user_id = params.select_data.split(',');  
					user_id.forEach(item => {
						this.list.forEach(uitem => { 
							if(uitem.ulist.length>0){
								uitem.ulist.forEach(usubitem => { 
									if (item == usubitem.id&&usubitem.dep_leader!=1) {
										usubitem.checked = true; 
										this.cs_user.push(usubitem);
									}
								})
							}
							
						})
					})						 
				}
				
				// 选择申请人
				if(this.scene==8){
					this.list=await this.getList();
					let user_id = params.select_data.split(',');  
					user_id.forEach(item => {
						this.list.forEach(uitem => { 
							if(uitem.ulist.length>0){
								uitem.ulist.forEach(usubitem => { 
									if (item == usubitem.id) {
										usubitem.checked = true; 
										this.cs_user.push(usubitem);
									}
								})
							}
							
						})
					})						 
				} 
				
				// 选择检查人员
				if(this.scene==9){
					this.list=await this.getList();
					let user_id=[];
					if(params.select_data){
						user_id = params.select_data.split(',');  
					}
					
					user_id.forEach(item => {
						this.list.forEach(uitem => { 
							if(uitem.ulist.length>0){
								uitem.ulist.forEach(usubitem => { 
									if (item == usubitem.id) {
										usubitem.checked = true; 
										this.cs_user.push(usubitem);
									}
								})
							}
							
						})
					})						 
				} 
				
				 
			}
			

		},
		onReachBottom() { 	 
		},
		methods: {
			// 获取用户列表
			async getList() {
				let res = await this.$api.user_api.userListBydep({
					keywords: this.keyword,
					department_id:this.scene==1?'':this.department_id
				})     
				if (res.data.code == 200) {
					this.loadingState.default = false;
					res.data.data.forEach(item => { 
						item.ulist.forEach((subitem,index) => {							 
							subitem.checked = false;
							subitem.isDisabled=false;
						}) 
					})  
					return res.data.data;
				}else{
					this.$showToast({ 
						title:res.data.msg,
						duration:1000,
					})
				}
			},

			// 选择用户
			selectUser(idx,subidx) {
				let select_data={};
				if(this.chat_type=='cut'){
					select_data=this.chat_user[idx]; 
				}else{
					select_data=this.list[idx].ulist[subidx]; 
				} 
				if(select_data.isDisabled){
					return
				}
				if (this.type == 1) {
					// 审批人 单选 
					this.list.forEach(item => {
						item.ulist.forEach(subitem => {
							if (subitem.id == select_data.id) { 
								subitem.checked = true;
								this.sp_user = subitem;
							} else {
								subitem.checked = false;
							}
						})
					})
				}

				if (this.type == 2) {
					
					if(this.chat_type=='cut'){
						// 删除成员
						this.chat_user.forEach(item => {
							if (item.id == select_data.id) {
								item.checked = !item.checked;
								if (item.checked) {
									this.cs_user.push(item);
									setTimeout(()=>{
									 	uni.createSelectorQuery().in(this).select("#J-scroll-body").boundingClientRect((scroll_data) => { 
											this.scroll_left=this.cs_user.length*45-200;
									 	}).exec();
									},300)
								} else {
									let index = this.cs_user.findIndex(citem => {
										return citem.id === select_data.id
									});  
									this.cs_user.splice(index, 1);									
									setTimeout(()=>{
									 	uni.createSelectorQuery().in(this).select("#J-scroll-body").boundingClientRect((scroll_data) => { 
											this.scroll_left=this.cs_user.length*45-200;
									 	}).exec();
									},300)
								}
							}
						})
					}else{
						this.list.forEach(item => {
							item.ulist.forEach(subitem => {
								if (subitem.id == select_data.id) {
									subitem.checked = !subitem.checked;
									if (subitem.checked) {
										this.cs_user.push(subitem);
										setTimeout(()=>{
										 	uni.createSelectorQuery().in(this).select("#J-scroll-body").boundingClientRect((scroll_data) => { 
												this.scroll_left=this.cs_user.length*45-200;
										 	}).exec();
										},300)
									} else {
										let index = this.cs_user.findIndex(citem => {
											return citem.id === select_data.id
										});  
										this.cs_user.splice(index, 1);									
										setTimeout(()=>{
										 	uni.createSelectorQuery().in(this).select("#J-scroll-body").boundingClientRect((scroll_data) => { 
												this.scroll_left=this.cs_user.length*45-200;
										 	}).exec();
										},300)
									}
								}
							})
						})
					}					
				}

			},

			// 搜索关键词
			async search() {
				this.list = [];
				this.list=await this.getList();
			},

			// 清空关键词
			async clearKeyword() {
				this.keyword = '';
				this.list = [];
				this.list=await this.getList();
			},

			confirm() {
				let data = {
					sp: {},
					cs: [],
					chat_user:{
						type:this.chat_type,
						cs:[]
					}
				}
				if (this.type == 1) {
					data.sp = this.sp_user;
					this.select_data_sp = this.sp_user;
					if(this.scene==1){		
						// 负责人
						this.$store.commit('FZR_LIST_UPDATE', data.sp); 
					}
					if(this.scene==2){
						// 项目经理
						this.$store.commit('PRO_MANAGE_LIST_UPDATE', data.sp); 
					}						 
					
					// 项目审批人
					if(this.scene==5){
						this.$store.commit('SP_USER_UPDATE', data.sp);
					}
					
					// 报告撰写人
					if(this.scene==7){
						this.$store.commit('REPORT_USER_UPDATE', data.sp);
					}					
					
					
				} else if (this.type == 2) {
					this.select_data_cs = this.cs_user;	
					
					// 项目成员
					if(this.scene==3){						
						this.cs_user.forEach(item => {
							data.cs.push(item);
						})
						this.$store.commit('PRO_USER_UPDATE', data.cs); 
					}
					
					if(this.scene==4){
						// 聊天成员
						this.cs_user.forEach(item => {
							data.chat_user.cs.push(item);
						})
						this.$store.commit('CHAT_USER_UPDATE', data.chat_user);
					}
					
					if(this.scene==6){
						// 抄送人
						this.cs_user.forEach(item => {
							data.cs.push(item);
						})
						this.$store.commit('CS_USER_UPDATE', data.cs);
					}
					
					if(this.scene==8){ 
						this.cs_user.forEach(item => {
							data.cs.push(item);
						})
						this.$store.commit('CS_USER_CAIGOU', data.cs);
					}
					
					if(this.scene==9){
						this.cs_user.forEach(item => {
							data.cs.push(item);
						})
						this.$store.commit('SC_USER_JIANCHA', data.cs);
					}
					
				}
				uni.navigateBack({
					delta: 1
				})
			},
 
			
			// 获取聊天室成员
			async getChatUser(){
				let res=await this.$api.user_api.chatUserList({
					gid:this.gid
				})     
				if(res.data.code==200){   
					this.loadingState.default = false;					
					return res.data.data.list;				 
				}
			},


		}
	}
</script>

<style lang="less">
	.page {}

	.mail-list {
		background: #fff;
		border-bottom: 1rpx solid rgba(238,238,238,1);
		.group-name {
			padding: 0 20rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #f8f8f8;
			font-size: 30rpx;
			font-weight: bold;
		}
		.disabled{
			background: #f5f5f5;
			.iconfont{
				color: #ccc !important;
			}
			.name {
				color:#999;
			}
		}
		.item {
			display: flex;
			align-items: center;
			padding: 0 0 0 20rpx;
			&:last-child{
				.content{
					border-bottom: 0 none;
				}
			}
			.icon {
				width: 70rpx;
				height: 70rpx;
				text-align: center;
				line-height: 70rpx;
				flex-shrink: 0;
				margin-right: 20rpx;
				background: #09f;
				border-radius: 15rpx;
				font-size: 28rpx;
				color: #fff;
			}
			.m-bg{
				background: #ff9600;
			}
			.content {
				flex-grow: 2;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid rgba(238,238,238,.5);
				padding: 36rpx 20rpx 36rpx 0;
				
				.name {
					font-size: 30rpx;
				}

				.job {
					color: #999;
					font-size: 28rpx;
				}
			}
		}
	}

	.select-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.select-wrap {
			display: flex;
			align-items: center;
			margin-left: 20rpx;

			.label {
				margin-right: 10rpx;
				font-size: 28rpx;
			}

			.select-list {				
				width: 200px;
				height: 35px;
				overflow: hidden;
				.scroll-view{ 
					display: flex;
					flex-wrap: nowrap;
					align-items: center; 
				}
				.avator {
					flex-shrink: 0;
					margin-right: 10rpx;
				}
			}
		}

		.btn {
			flex-shrink: 0;
			height: 70rpx;
			line-height: 70rpx;
			margin-right: 20rpx;
			padding: 0 20rpx;
			background: #ff9600;
			border-radius: 10rpx;
			color: #fff;
			font-size: 28rpx;
		}
	}
</style>
